Introduction to Components and Sling Model

Hello, good to see you. Let us begin with a new learning.

Introduction to Components and Sling Model

Today we will understand the basics of components and sling model in AEM.

What are Components

Components are the building blocks of content on a page. A component is a reusable unit of functionality that can be placed on a page to represent specific content or behavior, such as a text block, image, carousel, form, or other interactive elements. Components are responsible for rendering content and logic on a web page and are used extensively in AEM’s Editable Templates and Pages.

How Do AEM Components Work

• Rendering Content:

  A component is usually called within a page’s HTML by its resource type . The page requests content, which the component renders based on its configuration and underlying logic.

• Dialog Configuration

  Components have dialogs where authors can configure the properties of the component, such as uploading an image or adding text. This dialog makes it easy for authors to personalize the content without needing to write code.

• Editable Content

  Components allow AEM authors to interact with the content directly in the AEM author interface. They can use drag-and-drop functionality to add, move, or remove components on a page.

Creation of Component

• First you need to go to crx/de and in your project, go to components and then create component.

  

• You will get a dialog box wherein you need to add all the details for the component creation which includes the pre filled ones.

  

• Therein you need to rename the .jsp file to .html file and also add a cd:dialog. This is the dialog in which the fiels persists which are then authored. Here we have created the text field, path field, date picker and a chekbor. For every such field, we have to add a different sling:resourceType. These sling:resourceTypes can be found from the ADOBE Granite UI.

  
  

• Then, you simple need to add the component on the page. You need to edit template, add the component to the cointainer's policy and then simply drop your component.

  
  

Creating Sling Model

• Now we need tto render the authored values of the component via sling model.

• @Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL) This defines that the Sling Model can be adapted from a Resource and pecifies how fields in the model should be injected.

• @ValueMapValue annotation is specifically used to inject properties from a Sling Resource into a Sling Model. It works with ValueMaps, which are essentially key-value pairs that store resource properties in AEM.

  The @Inject annotation can be used with different types, and AEM will automatically resolve the correct source for the injection. Here we are using it to inject ResourceResolver

                                  
                                      package com.local.core.models;
  
                                      import org.apache.sling.api.resource.Resource;
                                      import org.apache.sling.api.resource.ResourceResolver;
                                      import org.apache.sling.models.annotations.DefaultInjectionStrategy;
                                      import org.apache.sling.models.annotations.Model;
                                      import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;
                                      
                                      import javax.annotation.PostConstruct;
                                      import javax.inject.Inject;
                                      import javax.jcr.Node;
                                      
                                      @Model(adaptables = Resource.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
                                      public class DemoComponentModel {
                                      
                                          @Inject
                                          ResourceResolver resolver;
                                      
                                          @ValueMapValue
                                          String text;
                                          @ValueMapValue
                                          String linkTo;
                                          @ValueMapValue
                                          String showCheck;
                                      
                                          String nodeName;
                                      
                                      
                                          public String getText() {
                                              return text;
                                          }
                                      
                                          public String getLinkTo() {
                                              return linkTo;
                                          }
                                      
                                          public String getShowCheck() {
                                              return showCheck;
                                          }
                                      
                                          public String getNodeName() {
                                              return nodeName;
                                          }
                                      
                                      
                                          @PostConstruct
                                          protected void init() {
                                              try{
                                                  Resource resource = resolver.getResource(linkTo);
                                                  Node node = resource.adaptTo(Node.class);
                                                  nodeName = node.getName();
                                              }catch(Exception e){
                                                  e.printStackTrace();
                                              }
                                          }
                                      }
                                      
  
                                  
                              

  

Conclusion

We have created a simple component and have learnt how to render its authoreded values using a sling model.

I hope you enjoyed the learing and have found the blog informative.